<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>当当网</title>
    <style>
        * {
            padding: 0;
        }

        body {
            margin: 40px;
        }

        #head_top {
            height: 100px;
        }

        /* logo属性 */
        #logo {
            height: 110px;
            width: 200px;
            float: left;
        }

        /* 设置右上角ul属性 */
        #ul_right {
            padding-left: 10px;
            float: right;
            margin-top: 70px;
            margin-bottom: 0px;
        }

        /* 设置右上角ul中的li属性 */
        #ul_right #li_right {
            float: left;
            list-style-type: none;
            background-color: #E8FFF5;
            padding: 10px;
            width: 70px;
        }

        /* 导航栏ul属性 */
        #ul_middle {
            list-style-type: none;
            padding: 0px;
            margin-top: 20px;
        }

        /* 导航栏ul 中的li属性 */
        #ul_middle li {
            float: left;
            background-color: #FF5809;
            list-style-type: none;
            width: 80px;
            padding-top: 8px;
            padding-bottom: 8px;
            text-align: center;
            color: white;
            font-size: 20px;
        }

        /* banner属性 */
        #img_banner {
            margin-top: 15px;
        }

        /* 3折疯抢图片 */
        #discount {
            position: relative;
            top: 60px;
            left: 1300px;
        }

        /* 下方主要内容 */
        #content {
            width: 100%;
            height: auto;
            border-color: #E8FFC4;
            border-style: solid;
            margin-top: 30px;
        }

        /* 图书畅销榜 */
        #hot {
            position: relative;
            top: 10px;
            right:15px;
        }
        /* 下方书籍 */
        #content_book{
            margin-top: 30px;
        }

        #book1 {
            margin-top: 40px;
            display: inline;
        }

        #best1 {
            position: relative;
            bottom: 220px;
            left: 50px;
        }

        #book01_content {
            width: 30%;
            display: inline-block;
        }

        #price {
            display: inline;
        }

        #introduce {
            font-size: 15px;
            line-height: 28px;
        }

        #book_name {
            color: #2894FF;
        }

        #price_span {
            color: #BB3D00;
            font-weight: bold;
        }
        #book23{
            width: 40%;
            margin-left: 30px;
            display: inline-block;
        }
        #book2{
            width: 20%;
            display: inline;
        }
        #book-02{
            position: relative;
            bottom: 40px;
            z-index: 1;
        }
        #book02_content,#book03_content{
            display: inline-block;
            width: 70%;
        }
        #best2{
            position: relative;
            left: 35px;
            bottom: 120px;
            z-index: 2;
        }
       #best3{
        position: relative;
            left: 30px;
            bottom:75px;
        }

        #price_discount{
            color: darkturquoise;
            margin-left: 20px;
        }
        #author,#press,#price{
            line-height: 18px;
        }
        #footer{
            text-align: center;
        }
        #validate{
            display: inline;
            position: relative;
            top: 20px;
        }
    </style>
</head>

<body>
    <div id="head_top">
        <img src="img/logo.jpg" id="logo">
        <img src="img/icon_count.png" id="discount">
        <ul id="ul_right">
            <li id="li_right">尾品汇</li>
            <li id="li_right">当当优品</li>
            <li id="li_right">数字馆</li>
            <li id="li_right">都看阅读</li>
        </ul>
    </div>
    <div id="head_middle">
        <ul id="ul_middle">
            <li name="li_middle">首页</li>
            <li name="li_middle">图书</li>
            <li name="li_middle">音像</li>
            <li name="li_middle">童装</li>
            <li name="li_middle">服装</li>
            <li name="li_middle">鞋靴</li>
            <li name="li_middle">运动</li>
            <li name="li_middle">箱包</li>
            <li name="li_middle">美妆</li>
            <li name="li_middle">珠宝</li>
            <li name="li_middle">家居</li>
            <li name="li_middle">食品</li>
            <li name="li_middle">酒</li>
            <li name="li_middle">手机</li>
            <li name="li_middle">数码</li>
            <li name="li_middle">电脑</li>
            <li name="li_middle">家电</li>
        </ul>
    </div>
    <img src="img/banner.png" width="100%" height="auto" alt="bannaer" id="img_banner">
    <div id="content">
        <img src="img/bg_bang.gif" alt="图书畅销榜" id="hot">
        <div id="content_book">
            <div id="book1">
                <img src="img/bookNo1.gif" alt="best1" id="best1">
                <img src="img/book-01.jpg" alt="第一张图片">
                <div id="book01_content">
                    <p id="book_name">偷影子的人</p>
                    <p id="author">作者: [法] 马克·李维（Marx Levy）著作</p>
                    <p id="press">出版社：湖南文艺出版社</p>
                    <div id="price">
                        <span id="price">当当价：</span>
                        <span id="price_span"> ￥ 17.90</span>
                    </div>
                    <p id="introduce">
                        不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力儿强大：他能”偷别人的影子“
                    </p>
                </div>
            </div>
            <div id="book23">
                <div id="book2">
                    <img src="img/bookNo2.gif" alt="best2" id="best2">
                    <img src="img/book-02.jpg" alt="第二张图片" id="book-02">
                    <div id="book02_content">
                        <p id="book_name">看见（央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</p>
                        <p id="author">作者：柴静 著</p>
                        <p id="press">出版社：广西师范大学出版社</p>
                        <div id="price">
                            <span id="price_span"> ￥ 29.40</span>
                            <span id="price_discount">7.4折</span>
                        </div>
                    </div>
                </div>
                <div id="book3">
                    <img src="img/bookNo3.gif" alt="best3" id="best3">
                    <img src="img/book-03.jpg" alt="第三张图片" >
                    <div id="book03_content">
                        <p id="book_name">改变孩子先改变自己</p>
                        <p id="author">作者：贾荣涛 贾毅 著</p>
                        <p id="press">出版社：作家出版社</p>
                        <div id="price">
                            <span id="price_span"> ￥ 22.20</span>
                            <span id="price_discount">7.4折</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <span>Copyright(C)当当网 2004-2017，All Rights Reserved</span>
        <img src="img/validate.gif" alt="底图" id="validate">
        <span>京ICP证041189号出版物经营许可证 新出发京批字第值0687号</span>
    </div>
</body>
<script>
    window.onload=function(){ 
        var a=document.getElementsByName("li_middle");
        var b=document.body.clientWidth/17;
        console.log(b);
        for(var i=0;i<a.length;i++){
            a[i].style.width=b+"px";
        }
    }
</script>

</html>